<template>
  <aside class="sidebar" :class="{ 
    'sidebar-collapsed': isCollapsed,
    'show': isMobileMenuOpen 
  }">
    <div class="sidebar-header">
      <div class="logo-container">
        <div class="logo-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <h2 class="logo-text" v-show="!isCollapsed">后台管理系统</h2>
      </div>
      <el-button 
        link 
        class="collapse-btn"
        @click="toggleCollapse"
        :icon="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
      ></el-button>
    </div>
    
    <el-menu 
      :default-active="activeMenu" 
      class="el-menu-vertical-demo" 
      @select="handleMenuSelect"
      :collapse="isCollapsed"
      background-color="#1E40AF"
      text-color="#ffffff"
      active-text-color="#409EFF"
      :unique-opened="true"
      router
    >
      <el-menu-item index="/app/dashboard">
        <el-icon><Monitor /></el-icon>
        <span>仪表板</span>
      </el-menu-item>
      
      <el-sub-menu index="/app/user">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/app/user/list">
          <el-icon><UserFilled /></el-icon>
          <span>用户列表</span>
        </el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="/app/permission">
        <template #title>
          <el-icon><Lock /></el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/app/role">
          <el-icon><UserFilled /></el-icon>
          <span>角色管理</span>
        </el-menu-item>
        <el-menu-item index="/app/permission/control">
          <el-icon><Key /></el-icon>
          <span>权限控制</span>
        </el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="/app/content">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>内容管理</span>
        </template>
        <el-menu-item index="/app/article">
          <el-icon><Edit /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-menu-item index="/app/file">
          <el-icon><Folder /></el-icon>
          <span>文件管理</span>
        </el-menu-item>
        <el-menu-item index="/app/system/logs">
          <el-icon><Document /></el-icon>
          <span>日志管理</span>
        </el-menu-item>
      </el-sub-menu>
      
      <el-menu-item index="/app/system/settings">
        <el-icon><Setting /></el-icon>
        <span>系统设置</span>
      </el-menu-item>
    </el-menu>
    
    <!-- 侧边栏底部信息 -->
    <div class="sidebar-footer" v-show="!isCollapsed">
      <div class="system-info">
        <div class="info-item">
          <span class="label">系统版本</span>
          <span class="value">v2.1.0</span>
        </div>
        <div class="info-item">
          <span class="label">在线用户</span>
          <span class="value">{{ onlineUsers }}</span>
        </div>
      </div>
    </div>
  </aside>
</template>

<script>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { 
  User, UserFilled, Setting, Lock, Menu, Key, Tools, 
  Document, Edit, Folder, Monitor
} from '@element-plus/icons-vue';

export default {
  name: 'Sidebar',
  components: {
    User, UserFilled, Setting, Lock, Menu, Key, Tools, 
    Document, Edit, Folder, Monitor
  },
  props: {
    isCollapsed: {
      type: Boolean,
      default: false
    },
    isMobileMenuOpen: {
      type: Boolean,
      default: false
    },
    onlineUsers: {
      type: Number,
      default: 12
    }
  },
  emits: ['toggle-collapse', 'menu-select'],
  setup(props, { emit }) {
    const route = useRoute();
    
    // 计算当前激活的菜单项
    const activeMenu = computed(() => {
      return route.path;
    });

    // 切换侧边栏折叠状态
    const toggleCollapse = () => {
      emit('toggle-collapse');
    };

    // 处理菜单选择
    const handleMenuSelect = (index) => {
      emit('menu-select', index);
    };

    return {
      activeMenu,
      toggleCollapse,
      handleMenuSelect
    };
  }
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 260px;
  background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
  color: white;
  z-index: 998;
  transition: all 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-collapsed {
  width: 64px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.logo-text {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.collapse-btn {
  color: white;
  font-size: 16px;
}

.el-menu-vertical-demo {
  border: none;
  background: transparent;
}

.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-sub-menu__title {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.el-menu-vertical-demo .el-menu-item:hover,
.el-menu-vertical-demo .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.el-menu-vertical-demo .el-menu-item.is-active {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
  border-right: 3px solid #409EFF;
}

.sidebar-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.system-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.label {
  color: rgba(255, 255, 255, 0.7);
}

.value {
  color: white;
  font-weight: 500;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 1001;
  }
  
  .sidebar.show {
    transform: translateX(0);
  }
}

/* 平板端样式 */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 240px;
  }
  
  .logo-text {
    font-size: 16px;
  }
  
  .el-menu-vertical-demo .el-menu-item,
  .el-menu-vertical-demo .el-sub-menu__title {
    font-size: 14px;
    padding: 12px 16px;
  }
}
</style> 